<template>
  <div id="statistics">
    <div id="pie" class="pie"></div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  data () {
    return {
      statistics: [],
      total: 0
    }
  },
  activated () {
    this.getStatistics()
  },
  methods: {
    // 初始化
    init () {
      let myChart = echarts.init(document.getElementById('pie'))
      let option = {
        title: {
          show: true,
          text: '分类统计',
          textStyle: {
            fontWeight: 'normal',
            color: '#999999',
            fontSize: 12
          },
          subtext: '共' + this.total + '个',
          subtextStyle: {
            color: '#333333',
            fontSize: 24
          },
          top: '30%',
          left: '50%',
          textAlign: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left',
          bottom: 'bottom',
          padding: [40, 50],
          itemWidth: 10,
          itemHeight: 10
        },
        series: [
          {
            type: 'pie',
            radius: ['40%', '60%'],
            center: ['50%', '35%'], // 饼图偏移量
            avoidLabelOverlap: false,
            label: {
              show: false
            },
            data: this.statistics
          }
        ]
      }
      option && myChart.setOption(option)
    },
    // 获取服装类型列表
    getStatistics () {
      this.$http({
        url: this.$http.adornUrl('/sys/clothingorder/statistics'),
        method: 'get'
      }).then(({ data: res }) => {
        if (res && res.code === 0) {
          this.statistics = res.data.jsonObjectList
          this.total = res.data.total
          console.log(this.statistics)
          this.init()
        } else {
          this.statistics = []
        }
      })
    }
  }
}
</script>

<style>
.pie{
  width: 100%;
  height: 535px;
}
</style>
